@import "app.scss";

.device-container {
  width: 100vw;

  .device-header {
    height: r(100);

    .d-img {
      height: 100%;
      width: 100%;
    }
  }

  .devive-nav-warp {
    .devive-nav {
      width: r(217);
      border-radius: r(10);
      padding: r(6);
      background: #EDF1F4;
      box-shadow: 0 r(2) r(2) 0 rgba(0, 0, 0, 0.25);
      transform: translateY(-50%);

      .navitem {
        padding: r(11);
        font-size: 12px;
        border-radius: r(10);

        &.active {
          color: #fff;
          background-color: #4D6EFC;
        }
      }
    }
  }

  .device-list {
    padding: r(22);
    flex-wrap: wrap;
    overflow-y: scroll;

    .listitem {
      width: r(153);
      font-size: 14px;
      margin-bottom: r(22);
      padding: r(10) r(6);
      border-radius: 5px;
      background-color: #FFF;
      box-shadow: 0px r(2) r(3) r(1) rgba(0, 0, 0, 0.25);

      .icon {
        width: r(36);
        height: r(36);
        margin: r(10) 0;

        .icon-img {
          width: 100%;
          height: 100%;
        }
      }

      .status-warp {
        width: 100%;

        .unline {
          position: relative;
          padding-left: 10px;
        }

        .unline::before {
          position: absolute;
          content: "";
          top: 50%;
          transform: translateY(-50%);
          left: 0;
          width: 4px;
          height: 4px;
          background-color: #FE2929;
        }

        .inline {
          position: relative;
          padding-left: 10px;
        }

        .inline::before {
          position: absolute;
          content: "";
          top: 50%;
          transform: translateY(-50%);
          left: 0;
          width: 4px;
          height: 4px;
          background-color: #7AFE29;

        }

        .right {
          width: r(20);
          height: r(20);

          .right-img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}